<template>
  <div class="pivot">
    &nbsp;

    <a-row>
      <a-col :span="12">
        <div class="echarts-pie">
          <DiscountingChat :widthProp="width" :heightProp="height"></DiscountingChat>
        </div>
      </a-col>
      <a-col :span="12">
        <RingRightChat :widthProp="width" :heightProp="height"></RingRightChat>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <h3>各个指标数据完成度分析</h3>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <SplatteringChat :widthProp="width" :heightProp="height"></SplatteringChat>?
      </a-col>
    </a-row>

  </div>
</template>

<script>

import DiscountingChat from './DiscountingChat'
import SplatteringChat from './SplatteringChat'
import RingRightChat from './RingRightChat'

export default {
  name: 'Detail2',
  data() {
    return {
      height: '300px',
      width: '100%',
      data: [{
        value: 160,
        name: '资产一'
      },
      {
        value: 80,
        name: '资产二'
      },
      {
        value: 40,
        name: '资产三'
      }
      ],
      tabPosition: 'GRI'
    }
  },
  components: {
    DiscountingChat,
    SplatteringChat,
    RingRightChat
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss">
@import '@/assets/css/taskManagement.scss';
@import '@/assets/css/scrollbar.scss';

.pivot {
  padding: 0 15px;
  background-color: #fff;

  h3 {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    text-align: left;
  }

  .group-btn {
    padding: 10px 5px;
    text-align: left;
  }
}
</style>
